<template>
<div id="cate-param">
    <div class="warn-info">注意：只允许为第三级分类设置相关参数！</div>
    <div class="select-goods-cate">
        <span class="select-title">选择商品分类</span>
        <my-cascade-selector 
            :list='cateList'
            @cascade-event="handleCascadeEvent"
        ></my-cascade-selector>
    </div>
    <div class="cate-param-content">
        <ul class="param-attr">
            <li 
                :class="['li-param', {'li-active': currentComponent==='DynamicParams'}]" 
                @click="handleClickChangeComponent('DynamicParams')"
            >动态参数</li>
            <li 
                :class="['li-attr', {'li-active': currentComponent==='StaticAttr'}]" 
                @click="handleClickChangeComponent('StaticAttr')"
            >静态属性</li>
        </ul>
        <div class="param-attr-content">
            <transition mode="out-in">
                <keep-alive>
                    <component 
                        :is="currentComponent" 
                        :isdisabled='isdisabled'
                        :list.sync='list'
                        :cid='cateId'
                    ></component>
                </keep-alive>
            </transition>
        </div>
    </div>
</div>
</template>

<script>
const DynamicParams = () => import('./DynamicParams')
const StaticAttr = () => import('./StaticAttr')
import { 
    goodsCateList, 
    getGoodsCateAttr 
} from '../../config/data'
export default {
    name: "classifyParams",
    data() {
        return {
            currentComponent: "DynamicParams",
            cateList: [],
            isdisabled: true,
            cateIdArr: [],
            list: []
        }
    },
    created() {
        this.getGoodsCateList()
    },
    methods: {
        // 切换组件
        handleClickChangeComponent(com) {
            let sel = ''
            switch (com) {
                case 'StaticAttr':
                    this.currentComponent = com
                    sel = 'only'
                    break;
                case 'DynamicParams':
                    this.currentComponent = com
                    sel = 'many'
            }
            this.list = []
            this.getGoodsCateAttr(this.cateId, sel)
        },
        // 级联选择器事件
        handleCascadeEvent(obj) {
            if(obj.selectedCid.length !== 3) {
                this.isdisabled = true
                this.cateIdArr = []
                this.list = []
                return;
            }
            this.isdisabled = false
            this.cateIdArr = obj.selectedCid
            let sel = this.currentComponent === 'DynamicParams' 
                ? 'many' : 'only'
            this.getGoodsCateAttr(this.cateId, sel)
        },
        // 获取分类 属性/参数
        async getGoodsCateAttr(cid, sel) {
            if(!cid) return;
            let result = await getGoodsCateAttr({cid, sel})
            this.list = result.data.list
        },
        // 分类列表
        async getGoodsCateList() {
            let result = await goodsCateList({pages: 0, counts: 0})
            this.cateList = result.data.cateList
        }
    },
    components: {
        DynamicParams,
        StaticAttr
    },
    computed: {
        cateId() {
            if(this.cateIdArr.length === 3) {
                return this.cateIdArr[2];
            }
            return '';
        }
    },
}
</script>

<style scoped>
#cate-param {
    height: 100%;
}
.warn-info,
.select-goods-cate {
    height: 50px;
    line-height: 50px;
}
.select-goods-cate {
    display: flex;
    align-items: center;
}
.select-title {
    height: 34px;
    line-height: 34px;
    padding-right: 16px;
    white-space: nowrap;
}
.warn-info {
    padding-left: 12px;
    border-radius: 6px;
    background-color: rgba(255, 168, 98, 0.3);
    box-sizing: border-box;
}
.cate-param-content {
    height: calc(100% - 100px);
}
.param-attr {
    display: flex;
    height: 42px;
    align-items: center;
    margin-bottom: 12px;
}
.li-param,
.li-attr {
    width: 120px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    border-bottom: 2px solid rgba(190, 190, 190, 0.4);
    cursor: pointer;
    box-sizing: border-box;
    transition: border-bottom-color 0.32s;
}
.li-param {
    margin-right: 12px;
}
.li-param:hover,
.li-attr:hover {
    border-bottom-color: rgba(39, 88, 247, 0.4);
}
.li-param:active,
.li-attr:active,
.li-active,
.li-active:hover {
    border-bottom-color: rgba(39, 88, 247, 0.8);
}
.param-attr-content {
    overflow-x: hidden;
    position: relative;
    width: 100%;
    height: calc(100% - 54px);
}
.param-attr-content::-webkit-scrollbar {
    display: none;
}
.v-enter {
	opacity: 0;
	transform: translateX(100%);
}
.v-leave-to {
	position: absolute;
	opacity: 0;
	transform: translateX(-100%);
}
.v-enter-active,
.v-leave-active {
	transition: all 0.32s ease;
}
</style>